<template>
  <div v-loading="loading" class="order_box" element-loading-text="拼命加载中...">
    <div class="head">
      <div class="full">
        <SvgIcon color="#1890ff" icon="order-approve-outline" size="32" style="margin-right: 5px;"></SvgIcon>
        <div class="text">
          <div>订单编号：{{ infoData.order_no || '-' }}</div>
        </div>
      </div>
      <el-space :size="8" class="space-wrap" wrap>
        <div class="space-item">
          <div class="title">售后状态</div>
          <DictTag v-model="infoData.status" :circle="false" dict-type="shop_order_after_sales_status"/>
        </div>
        <div class="space-item">
          <div class="title">售后类型</div>
          <DictTag v-model="infoData.refund_type" :circle="false" dict-type="shop_order_refund_type"/>
        </div>
        <div class="space-item">
          <div class="title">申请金额</div>
          <span>￥{{ numeral(infoData.refund_money).format('0.00') }}</span>
        </div>
        <div class="space-item">
          <div class="title">申请时间</div>
          <div>{{ infoData.create_time || '-' }}</div>
        </div>
      </el-space>
    </div>

    <el-divider border-style="dashed"/>

    <el-card class="content-card">
      <el-descriptions :column="responsiveState.column" title="退款信息">
        <el-descriptions-item :width="itemWidth" label="售后类型：">
          <DictTag v-model="infoData.refund_type" :circle="false" dict-type="shop_order_refund_type"/>
        </el-descriptions-item>
        <el-descriptions-item :width="itemWidth" label="退款原因：">
          <span>{{ infoData.refund_reason || '-' }}</span>
        </el-descriptions-item>
        <el-descriptions-item :width="itemWidth" label="退款说明：">
          <span>{{ infoData.refund_desc || '-' }}</span>
        </el-descriptions-item>
        <el-descriptions-item :width="itemWidth" label="退款凭证：">
          <el-image v-if="infoData.voucher_list?.length > 0" :preview-src-list="infoData.voucher_list"
                    :preview-teleported="true"
                    :src="infoData.voucher_list[0]" style="width: 32px; height: 32px">
          </el-image>
          <span v-else>-</span>
        </el-descriptions-item>
      </el-descriptions>
    </el-card>

    <el-divider border-style="dashed"/>

    <el-card class="content-card">
      <el-descriptions :column="responsiveState.column" title="用户信息">
        <el-descriptions-item :width="itemWidth" label="用户编号：">
          <span>{{ userInfo.id || '-' }}</span>
        </el-descriptions-item>
        <el-descriptions-item :width="itemWidth" label="用户账号：">
          <span>{{ userInfo.account || '-' }}</span>
        </el-descriptions-item>
        <el-descriptions-item :width="itemWidth" label="用户昵称：">
          <span>{{ userInfo.nickname || '-' }}</span>
        </el-descriptions-item>
      </el-descriptions>
    </el-card>

    <el-divider border-style="dashed"/>

    <el-card class="content-card">
      <el-descriptions :column="responsiveState.column" title="订单信息">
        <el-descriptions-item :width="itemWidth" label="商家编号：">
          <span>{{ infoData.shop_id || '-' }}</span>
        </el-descriptions-item>
        <el-descriptions-item :width="itemWidth" label="订单编号：">
          <span>{{ infoData.order_id || '-' }}</span>
        </el-descriptions-item>
        <el-descriptions-item :width="itemWidth" label="原订单号：">
          <span>{{ infoData.source_order_no || '-' }}</span>
        </el-descriptions-item>
        <el-descriptions-item :width="itemWidth" label="联系人：">
          <span>{{ infoData.contact_name || '-' }}</span>
        </el-descriptions-item>
        <el-descriptions-item :width="itemWidth" label="联系方式：">
          <span>{{ infoData.contact_phone || '-' }}</span>
        </el-descriptions-item>
        <el-descriptions-item :width="itemWidth" label="申请时间：">
          <span>{{ infoData.create_time || '-' }}</span>
        </el-descriptions-item>
        <el-descriptions-item :width="itemWidth" label="审核时间：">
          <span>{{ infoData.audit_time || '-' }}</span>
        </el-descriptions-item>
        <el-descriptions-item :width="itemWidth" label="审核说明：">
          <span>{{ infoData.audit_message || '-' }}</span>
        </el-descriptions-item>
      </el-descriptions>
    </el-card>

    <el-divider border-style="dashed"/>

    <el-card class="content-card">
      <div class="el-descriptions__header">
        <div class="el-descriptions__title">商品信息</div>
      </div>

      <el-table :data="itemList" fit highlight-current-row>
        <el-table-column align="left" label="商品信息" min-width="300">
          <template #default="scope">
            <div class="product">
              <div class="image">
                <el-image :src="scope.row.goods_cover_url"/>
              </div>
              <div class="title">{{ scope.row.goods_name }}</div>
            </div>
          </template>
        </el-table-column>

        <el-table-column align="center" label="售价" min-width="120">
          <template #default="scope">
            <span>{{ numeral(scope.row.price).format('0.00') }}</span>
          </template>
        </el-table-column>

        <el-table-column align="center" label="数量" min-width="110">
          <template #default="scope">
            <span>{{ scope.row.quantity }}</span>
          </template>
        </el-table-column>

        <el-table-column align="center" label="小计" min-width="120">
          <template #default="scope">
            <span>{{ numeral(scope.row.total_price).format('0.00') }}</span>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
  </div>
</template>

<script lang="ts" setup>
import { SvgIcon } from '@/components/icon';
import { useResponsiveState } from '@/hooks/use-responsive-state.ts';
import { onMounted, ref } from 'vue';
import { defUserInfoData } from '@/api/api-user.ts';
import { OrderItemData } from '@/views/shop/order/data.ts';
import { OrderAfterSalesData } from '@/views/shop/after-sales/data.ts';
import { orderAfterSalesInfo } from '@/api/api-shop.ts';
import numeral from 'numeral';
import { DictTag } from '@/components/dict-tag';

const props = defineProps({
  id: {
    type: Number,
    required: true
  }
});
const loading = ref(false);
const itemWidth = ref('130px')
const responsiveState = useResponsiveState(
    {
      ['lg']: {column: 3},
      ['sm']: {column: 2},
      ['xs']: {column: 1},
    },
    {column: 3,},
);

/** 初始化 **/
onMounted(async () => {
  handleRefresh();
})

/** 用户信息 */
const userInfo = ref({...defUserInfoData});
/** 订单信息 */
const defInfoData: OrderAfterSalesData = <OrderAfterSalesData>{};
const infoData = ref({...defInfoData});
/** 订单项目数据 */
const itemList = ref<OrderItemData[]>([]);

/** 刷新数据 */
const handleRefresh = () => {
  userInfo.value = {...defUserInfoData};
  infoData.value = {...defInfoData};
  itemList.value = [];
};

/** 加载数据 */
const initData = (id: number) => {
  if (!id || id <= 0) {
    return
  }
  loading.value = true;
  orderAfterSalesInfo(id).then(res => {
    const {info, user_info, goods_list} = res.data;
    infoData.value = info;
    userInfo.value = user_info;
    itemList.value = goods_list;
  }).finally(() => loading.value = false)
};

defineExpose({initData})
</script>

<style lang="scss" scoped>
:deep() {
  .el-descriptions__label {
    margin-right: 0;
    display: inline-block;
    min-width: 68px;
    vertical-align: top;
  }

  .el-descriptions__cell {
    vertical-align: top;
    font-size: 13px !important;
  }

  .el-divider--horizontal {
    margin: 8px 0;
  }

  .el-descriptions__body .el-descriptions__table:not(.is-bordered) .el-descriptions__cell {
    padding-bottom: 6px;
  }
}

.order_box {
  .head {
    padding: 15px;
  }

  .full {
    display: flex;

    .text {
      align-self: center;
      flex: 1;
      padding-left: 6px;
      font-size: 13px;
    }
  }

  .space-wrap {
    margin-top: 18px;
    width: 100%;
    text-align: center;

    .space-item {
      width: 10rem;
      font-size: 14px;
      line-height: 14px;
      color: var(--el-text-color-primary);

      .title {
        margin-bottom: 12px;
        font-size: 13px;
        line-height: 13px;
        color: var(--el-color-info);
      }
    }
  }
}

.product {
  .image {
    width: 48px;
    height: 48px;
    display: inline-block;
    vertical-align: middle;
  }

  .title {
    width: calc(100% - 60px);
    padding-left: 6px;
    text-align: left;
    display: inline-block;
    vertical-align: middle;
    height: 1.3rem;
    line-height: 1.2rem;
  }
}
</style>
